<template>
  <div class="met-showproduct-body">
    <div class="head">
      <div class="img-list">
        <swiper :style="'height:'+(imgHeights[current])+'rpx'" :current="current" @change="imageChange">
          <block v-for="item in product_view.displayimg" :key="item.id">
            <swiper-item>
              <image mode="widthFix" :src="item.url" class="slide-image" @load="imageLoad" />
            </swiper-item>
          </block>
        </swiper>
      </div>
      <div class="img-dots">
        <div class="list">
          <div class="item" v-for="(item,dotIndex) in product_view.displayimg" :key="item.id" 
          :style="{borderColor: dotIndex===current ? app_tabBar.config.thirdcolor : ''}"
          @click="changeSwiper(dotIndex)"
           :class="{active:dotIndex===current}">
            <image mode="widthFix" :src="item.url" class="dots-image" />
          </div>
        </div>
      </div>
      <div class="info">
        <div class="title" :style="{color:app_tabBar.config.firstcolor}">{{product_view.title}}</div>
        <div class="desc" :style="{color:app_tabBar.config.secondcolor}">{{product_view.description}}</div>
        <div class="para">
          <ul class="ul">
            <li v-for="item in product_view.para" :key="item.id" :style="{color:app_tabBar.config.secondcolor}">
              <span>{{item.name}} : {{item.value}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="met_tab">
        <div class="met_tab_head">
          <div v-for="(item,index) in product_view.tab" :key="item.id ">
            <div class="name" @click="handleChange(index)" 
            :style="{color: activeTab===index ? app_tabBar.config.thirdcolor : app_tabBar.config.firstcolor,borderColor:activeTab===index?app_tabBar.config.thirdcolor:''}"
            :class="{'active':activeTab===index}">{{item.tab_name}}</div>
          </div>
        </div>
        <div class="met_tab_content">
          <div v-for="(item,contentIndex) in product_view.tab" :key="item.id ">
            <div v-show="activeTab===contentIndex">
              <wxParse :content="item.content" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <sidebar></sidebar>
  </div>
</template>
<script>
import wxParse from 'mpvue-wxparse'
import Sidebar from '@/components/common/Sidebar'
import { mapGetters } from 'vuex'
export default {
  components: {
    wxParse,
    Sidebar
  },
  computed: {
    ...mapGetters(['product_view','app_tabBar'])
  },
  data() {
    return {
      activeTab: 0,
      imgHeights: [],
      current: 0
    }
  },
  methods: {
    handleChange(index) {
      this.activeTab = index
    },
    imageLoad(e) {
      const imgwidth = e.mp.detail.width
      const imgheight = e.mp.detail.height
      const ratio = imgwidth / imgheight
      const viewHeight = 690 / ratio
      this.imgHeights.push(viewHeight)
    },
    imageChange(e) {
      this.current = e.mp.detail.current
    },
    changeSwiper(index) {
      this.current = index
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('~mpvue-wxparse/src/wxParse.css');
.met-showproduct-body {
  .head {
    padding: 15px;
    margin-bottom: 15px;
    .img-dots {
      margin-top: 15px;
      .list {
        display: flex;
        flex-direction: row;
        height: 64px;
        justify-content: center;
        overflow-x: auto;
      }
      .item {
        width: 64px;
        border: 2px solid #eee;
        margin: 0 5px;
        transition: border 0.3s ease;
        &.active {
          border-color: #444;
        }
      }
      .dots-image {
        width: 60px;
        height: 60px;
        object-fit: cover;
      }
    }
    .info {
      margin-top: 15px;
      .title {
        font-size: 24px;
        color: #444;
        margin-bottom: 15px;
      }
      .desc {
        color: #848484;
        font-size: 16px;
        margin-bottom: 15px;
      }
      .para {
        .ul {
          display: flex;
          flex-wrap: wrap;
        }
        ._li {
          width: 50%;
          font-size: 14px;
          color: #848484;
          margin-bottom: 15px;
          overflow: hidden;
        }
      }
    }
  }
  .content {
    padding: 15px;
    margin-bottom: 15px;
    .met_tab {
      .met_tab_head {
        display: flex;
        border-bottom: 1px solid #dcdcdc;
        overflow-y: auto;
        .name {
          padding: 5px 10px;
          font-size: 14px;
          margin-right: 15px;
          white-space: nowrap;
          &.active {
            border-bottom: 2px solid #000;
          }
        }
      }
      .met_tab_content {
        padding: 30px 0;
      }
    }
  }
}
</style>